<template>
  <div
    class="mark-tool"
    v-on="{
      click:
        route.query.type === 'create'
          ? () => Hooks.handleTitleClick(Hooks.visibile.value)
          : null,
    }"
    :style="{ display: route.query.type === 'create' ? 'flex' : 'none' }"
  >
    标注工具
  </div>
  <div
    class="mark-tool-list"
    :style="{ display: Hooks.visibile.value ? 'flex' : 'none' }"
  >
    <a-trigger
      position="bl"
      trigger="click"
      class="mark-tool-list-box"
      v-for="t in toolBarList.markToolList"
      :key="t.id"
      :popup-visible="t.isVisible"
      :unmount-on-close="false"
      :blur-to-close="false"
      :click-outside-to-close="false"
    >
      <div
        class="mark-tool-list-item"
        :style="{ display: route.query.type === 'create' ? 'flex' : 'none' }"
        :class="toolBarList.currentItem === t.id ? 'active' : ''"
      >
        <div class="mark-tool-dropdown" @click="Hooks.handleListClick(t)">
          <div class="icon-box">
            <i :class="`iconfont ${t.name}`"></i>
          </div>
          <div class="label">{{ t.label }}</div>
        </div>
      </div>
      <template #content>
        <!-- 渲染病灶 -->
        <div class="lesion-box" v-if="['矩形', '椭圆', '闭合曲线'].includes(t.label)">
          <a-tooltip
            :content="item?.name"
            v-for="item in t.lesionList"
            :key="item.lesion"
            position="bottom"
          >
            <div class="drop-item" @click="Hooks.handleLesionClick(t, item)">
              <div
                class="drop-item-color"
                :style="{ backgroundColor: item?.color }"
              ></div>
              <div>{{ item?.name }}</div>
            </div>
          </a-tooltip>
        </div>
        <div class="mark-card" v-if="['自由画笔', '橡皮擦', '长方体'].includes(t.label)">
          <div v-if="t.label === '自由画笔'" class="mark-freebrush-box">
            <div class="mark-box-title">
              <div>{{ t.label }}</div>
              <div class="close-icon">
                <icon-close @click="t.isVisible = false" />
              </div>
            </div>
            <div class="mark-box-content">
              <div class="content-item">
                <span class="item-title">病灶</span>
                <a-trigger
                  position="bl"
                  trigger="click"
                  class="mark-tool-list-box"
                  v-model:popup-visible="t.isSecondVisible"
                  :unmount-on-close="false"
                  :blur-to-close="false"
                  :click-outside-to-close="false"
                >
                  <!-- :popup-visible="item.isVisible" -->
                  <div class="item-lesion-box">
                    {{ t.lesionValue ? t.lesionValue : "选择病灶" }}
                    <i class="iconfont icon-daohang-jiantou" />
                  </div>
                  <template #content>
                    <div class="lesion-box">
                      <a-tooltip
                        :content="item?.name"
                        v-for="item in t.lesionList"
                        :key="item.lesion"
                        position="bottom"
                      >
                        <div
                          class="drop-item"
                          @click="Hooks.handleBrushLesionClick(t, item)"
                        >
                          <div
                            class="drop-item-color"
                            :style="{ backgroundColor: item?.color }"
                          ></div>
                          <div>{{ item?.name }}</div>
                        </div>
                      </a-tooltip>
                    </div>
                  </template>
                </a-trigger>
              </div>
              <div class="content-item">
                <span class="item-title">半径</span>
                <a-slider
                  show-input
                  :min="1"
                  :max="50"
                  v-model="Hooks.brushRadius.value"
                  @change="Hooks.handleSliderChange(t, 'brushRadius', $event)"
                />
                <span class="item-suffix">mm</span>
              </div>
              <div class="content-item">
                <span class="item-title">层数</span>
                <a-slider
                  show-input
                  :min="1"
                  :max="10"
                  v-model="Hooks.brushLayer.value"
                  @change="Hooks.handleSliderChange(t, 'brushLayer', $event)"
                />
                <span class="item-suffix"></span>
              </div>
            </div>
          </div>
          <div v-else-if="t.label === '长方体'" class="mark-eraser-box">
            <div class="mark-box-title">
              <div>{{ t.label }}</div>
              <div class="close-icon">
                <icon-close @click="t.isVisible = false" />
              </div>
            </div>
            <div class="mark-box-content">
              <div class="content-item">
                <span class="item-title">病灶</span>
                <a-trigger
                    position="bl"
                    trigger="click"
                    class="mark-tool-list-box"
                    v-model:popup-visible="t.isSecondVisible"
                    :unmount-on-close="false"
                    :blur-to-close="false"
                    :click-outside-to-close="false"
                >
                  <!-- :popup-visible="item.isVisible" -->
                  <div class="item-lesion-box">
                    {{ t.lesionValue ? t.lesionValue : "选择病灶" }}
                    <i class="iconfont icon-daohang-jiantou" />
                  </div>
                  <template #content>
                    <div class="lesion-box">
                      <a-tooltip
                          :content="item?.name"
                          v-for="item in t.lesionList"
                          :key="item.lesion"
                          position="bottom"
                      >
                        <div
                            class="drop-item"
                            @click="Hooks.handleBrushLesionClick(t, item)"
                        >
                          <div
                              class="drop-item-color"
                              :style="{ backgroundColor: item?.color }"
                          ></div>
                          <div>{{ item?.name }}</div>
                        </div>
                      </a-tooltip>
                    </div>
                  </template>
                </a-trigger>
              </div>
              <div class="content-item">
                <span class="item-title">边长</span>
                <a-slider
                    show-input
                    :min="1"
                    :max="150"
                    v-model="Hooks.sideLength.value"
                    @change="Hooks.handleSliderChange(t, 'sideLength', $event)"
                />
                <span class="item-suffix">mm</span>
              </div>
            </div>
          </div>
          <div v-else class="mark-eraser-box">
            <div class="mark-box-title">
              <div>{{ t.label }}</div>
              <div class="close-icon">
                <icon-close @click="t.isVisible = false" />
              </div>
            </div>
            <div class="mark-box-content">
              <div class="content-item">
                <span class="item-title">半径</span>
                <a-slider
                  show-input
                  :min="1"
                  :max="50"
                  v-model="Hooks.eraserRadius.value"
                  @change="Hooks.handleSliderChange(t, 'eraserRadius', $event)"
                />
                <span class="item-suffix">mm</span>
              </div>
              <div class="content-item">
                <span class="item-title">层数</span>
                <a-slider
                    show-input
                    :min="1"
                    :max="10"
                    v-model="Hooks.eraserLayer.value"
                    @change="Hooks.handleSliderChange(t, 'eraserLayer', $event)"
                />
                <span class="item-suffix"></span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </a-trigger>
  </div>
</template>

<script lang="ts" setup>
import { inject, ref } from "vue";
import { useRoute } from "vue-router";
import useToolBar from "./hooks/useToolBar";
import { useToolBar as ToolBarList } from "@/store";
import { debounce } from "@/utils/debounce";

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "",
  },
});
const provideState = inject("provideState", { getToolBarItem: new Function() });
const Hooks = useToolBar(provideState);
const toolBarList = ToolBarList();
const route = useRoute();
</script>

<style lang="less" scoped>
@import url("../../component.less");
</style>
<style lang="less">
.mark-tool-list-box {
  padding: 1px;
  background-color: #353e44;
  border: 0;
  border-radius: 2px;
  .lesion-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 540px;
    .drop-item {
      width: 106px;
      height: 26px;
      line-height: 26px;
      font-weight: 400;
      font-size: 12px;
      color: #ccc;
      padding: 0;
      margin: 1px;
      background: #414b52;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 4px;
      cursor: pointer;
      &-color {
        width: 10px;
        height: 10px;
        margin-right: 4px;
        margin-top: 2px;
      }
      div:nth-of-type(2) {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 80px;
        width: 80px;
        user-select: none;
      }
    }
    .drop-item:hover {
      background: #5c6871;
      text-decoration: none;
      color: #13fffb;
    }
  }
  .mark-card {
    width: 230px;
    background: #42484c;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    .mark-freebrush-box {
      height: 97px;
    }
    .mark-eraser-box {
      height: 78px;
    }
    .mark-box {
      height: 58px;
    }
    .mark-box-title {
      height: 24px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #5c6871;
      user-select: none;
      align-items: center;
      padding: 0 6px;
      color: #fff;
      font-weight: 400;
      font-size: 12px;
      line-height: 12px;
    }
    .close-icon {
      cursor: pointer;
    }
    .mark-box-content {
      padding: 0 6px;
      // margin-top: 6px;
      .content-item {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
        color: #fff;
        .item-title {
          white-space: nowrap;
          margin-right: 8px;
        }
        .item-suffix {
          display: inline-block;
          width: 23px;
          height: 12px;
          margin-left: 2px;
        }
        .arco-slider {
          flex: 1;
        }
        .arco-slider-input {
          margin-left: 6px;
          .arco-input-wrapper {
            width: 38px;
            height: 18px;
            background-color: transparent;
            border: 1px solid #ccc;
            color: #fff;
            padding: 0;
          }
        }
      }
      .content-item:nth-of-type(1) {
        height: 16px;
        justify-content: space-between;
        user-select: none;
        cursor: pointer;
        .iconfont {
          font-weight: 400;
          font-size: 12px;
          vertical-align: text-bottom;
        }
      }
      .content-item:nth-of-type(1):hover {
        color: #13fffb;
      }
      .content-item:nth-of-type(2) {
        margin-bottom: 2px;
      }
    }
  }
}
</style>
